<template>
  <layout class="layout-100 gc-clear-box">
    <Header class="header-cont" v-show="$route.params.type == 'details'">方案详情</Header>
    <Header class="header-cont" v-show="$route.params.type == 'examine'">风险审核</Header>
    <Header class="header-cont" v-show="$route.params.type == 'issue'">风险签发</Header>
    <Content class="content-cont">
      <Tabs value="1" v-model="active" @on-click="activeTab" >
        <TabPane label="风险信息" v-if="showMsg == 1" name="1"></TabPane>
        <TabPane label="措施信息" v-if="$route.params.type != 'details' && showMsg == 2" name="2"></TabPane>
        <TabPane label="措施信息" v-if="$route.params.type == 'details'" name="2"></TabPane>
        <TabPane label="审批进度" name="3"></TabPane>
        <TabPane label="问询回复" name="4" v-if="$route.params.type == 'details' || ($route.params.type != 'details' && showMsg == 2)">
          <replyInquiries v-show="active == 4" :businessType="businessType" :editModel="detailData"></replyInquiries>
        </TabPane>
      </Tabs>
      <Collapse v-model="value1" v-if="$route.params.type !== 'details' && (active != 3 && active != 4) ">
        <Panel name="1" v-show="showMsg == 1 && active == 1">
          风险信息
          <div slot="content">
            <Form  label-position="top">
              <Row >
                <Col span="12">
                <FormItem label="公司名称">
                  <Input style="width:350px;" v-model.trim="detailData.enterpriseName" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="项目名称" >
                  <Input style="width:350px;" v-model.trim="detailData.projectName" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="工点名称">
                  <Input style="width:350px;" v-model.trim="detailData.constructionPointName" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="工点风险等级">
                  <Input style="width:350px;" v-model.trim="detailData.distRiskGrade"  readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="起始时间">
                  <Input style="width:350px;" v-model.trim="detailData.startTime" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="结束时间">
                  <Input style="width:350px;" v-model.trim="detailData.endTime" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="是否在施">
                  <Input style="width:350px;" v-model.trim="detailData.isWork" readonly/>
                </FormItem>
                </Col>
                <Col span="24">
                <FormItem label="工点描述">
                  <Input style="width:80%;" type="textarea" v-model.trim="detailData.constructionPointDescription" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="作业风险名称">
                  <Input style="width:350px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" :title="detailData.riskName" v-model.trim="detailData.riskName"  class="width50" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="作业风险类型">
                  <Input style="width:350px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" :title="detailData.riskCategoryNames" v-model.trim="detailData.riskCategoryNames" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="作业风险等级">
                  <Input style="width:350px;" v-model.trim="detailData.riskLevelName" readonly/>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="分级方法">
                  <Input style="width:350px;" v-model.trim="detailData.classificationMethodName" :title="detailData.classificationMethodName" readonly/>
                </FormItem>
                </Col>
                <Col span="24">
                <FormItem label="具体风险描述">
                  <Input style="width:80%;" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
                </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
        </Panel>
        <Panel name="1"  v-show="showMsg == 2 && active == 2">
          措施信息
          <div slot="content"  v-show="showMsg == 2">
            <Table
              border
              :columns="columns"
              :data="MeasuresDetails"
            >
            </Table>
          </div>
        </Panel>
        <Panel name="2" v-show="active != 3 && active != 4">
          {{this.$route.params.name}}结果
          <div slot="content">
            <Form :model="formData"  :show-message="false" :label-width="100">
              <FormItem :label="this.$route.params.name+'结果'" :required="true">
                <RadioGroup v-model="formData.audit">
                  <Radio label="1">通过</Radio>
                  <Radio label="2">驳回</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem :label="this.$route.params.name+'说明'" :required="true">
                <Input style="width: 79%"
                       v-model.trim="formData.textContent"
                       placeholder="请输入说明"
                       maxlength="500"
                       type="textarea"></Input>
              </FormItem>
            </Form>
          </div>
        </Panel>
        <Panel name="4">
          <replyInquiries :businessType="businessType" :editModel="detailData"></replyInquiries>
        </Panel>
      </Collapse>
      <Form label-position="top" v-else>
      <Row v-show="active == 1">
        <Col span="12">
        <FormItem label="公司名称">
          <Input style="width:350px;" v-model.trim="detailData.enterpriseName" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="项目名称" >
          <Input style="width:350px;" v-model.trim="detailData.projectName" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="所属区域">
          <Input style="width:350px;" v-model.trim="detailData.areaName" readonly/>
        </FormItem>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="工点名称">
          <Input style="width:350px;" v-model.trim="detailData.constructionPointName" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="工点风险等级">
          <Input style="width:350px;" v-model.trim="detailData.distRiskGrade"  readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="起始时间">
          <Input style="width:350px;" v-model.trim="detailData.startTime" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="结束时间">
          <Input style="width:350px;" v-model.trim="detailData.endTime" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="是否在施">
          <Input style="width:350px;" v-model.trim="detailData.isWork" readonly/>
        </FormItem>
        </Col>
        <Col span="24">
        <FormItem label="工点描述">
          <Input style="width:72%;" type="textarea" v-model.trim="detailData.constructionPointDescription" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="作业风险名称">
          <Input style="width:350px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"  v-model.trim="detailData.riskName" :title="detailData.riskName" class="width50" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="作业风险类型">
          <Input style="width:350px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" v-model.trim="detailData.riskCategoryNames" :title="detailData.riskCategoryNames" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="作业风险等级">
          <Input style="width:350px;" v-model.trim="detailData.riskLevelName" readonly/>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="分级方法">
          <Input style="width:350px;" v-model.trim="detailData.classificationMethodName" :title="detailData.classificationMethodName" readonly/>
        </FormItem>
        </Col>
        <Col span="24">
        <FormItem label="具体风险描述">
          <Input style="width:72%;" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
        </FormItem>
        </Col>
      </Row>
      <Row v-show="active == 2">
        <Table
          border
          :columns="columns"
          :data="MeasuresDetails"
        >
        </Table>
      </Row>
      <Row v-show="active == 3">
        <div class="process-recent">{{ processModel.yourMessage }}</div>
        <Timeline>
          <TimelineItem
            color="blue"
            v-for="(item, index) in processModel.timeline"
            :key="index"
          >
            <Icon type="ios-radio-button-on" slot="dot" />
            <div class="process-container">
              <h4 class="process-title">
                {{ item.name }}：<span
                :class="1 == item.audit ? 'audit--success' : 'audit--danger'"
              >{{ item.auditName }}</span
              >
              </h4>
              <div class="process-list">
                <Row
                  :gutter="32"
                  type="flex"
                  v-for="(row, innerIndex) in item.timelineItemDetailsList"
                  :key="innerIndex"
                >
                  <Col :md="8" :lg="5" :xl="4" :xxl="3">
                  <span class="process-name">{{ row.userName }}</span>
                  <span class="process-position" v-if="row.userPost">
                      （{{ row.userPost }}）
                    </span>
                  </Col>
                  <Col>
                  于
                  </Col>
                  <Col>
                  <strong>{{ row.createTime }}</strong>
                  </Col>
                  <Col>
                  <span v-if="index > 0">进行</span>
                  <strong>{{ row.processName }}</strong>
                  </Col>
                  <Col v-if="index > 0 && row.processName !='方案制定' && row.processName !='风险修订' && row.processName !='方案修订' && row.processName !='撤销'">
                  审批<strong
                  :class="
                        1 == row.audit ? 'audit--success' : 'audit--danger'
                      "
                >{{ row.auditName }}</strong>
                  </Col>
                  <Col v-if="index > 0 && row.processName !='方案制定' && row.processName !='风险修订' && row.processName !='方案修订' && row.processName !='撤销'"
                  >并填写说明：<span>{{ row.textContent }}</span>
                  </Col>
                </Row>
              </div>
              <div class="process-angle"></div>
            </div>
          </TimelineItem>
        </Timeline>
      </Row>
      <!-- <Row v-show="active == 4 || active == 2">
        
      </Row> -->
      </Form>
    </Content>
    <Footer class="footer-cont" v-show="$route.params.type !== 'details'">
      <Button type="primary" @click="saveSubmit()">保存</Button>
      <Button @click="closetab">取消</Button>
    </Footer>
    <Modal v-model="isInquiries" title="业务问询" width="50%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <inquiries ref="isInquiriesBox" :checkedRows="checkedRows" :businessType="businessType" @modelBox="modelBox" @person="person"></inquiries>
      </div>
    </Modal>
    <Modal v-model="personModel" title="选择人" width="80%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <checkPerson @personBox="personBox"></checkPerson>
      </div>
    </Modal>
    <span class="inquiries" @click="replyChild()">{{$route.query.message == true ? '回复' : '问询'}}</span>
  </layout>
</template>

<script>
import inquiries from '../../components/modules/inquiries/index'
import checkPerson from '../../components/modules/inquiries/checkPerson'
import replyInquiries from '../../components/modules/inquiries/replyInquiries'
    import HeaderBar from "../../components/modules/home/header-bar/header-bar";
    import { mapMutations } from 'vuex'
    export default {
      components: {HeaderBar,
      inquiries,
      checkPerson,
      replyInquiries},
      name: "management-and-measures-detail",
      data() {
        return {
          checkedRows:[],
          businessType:'businesstype_measures',
          isInquiries:false,
          personModel:false,
          active:'1',
          formData:{
            audit :'1',
            textContent:''
          },
          showMsg:1,
          detailData:{},
          postData:{
            risk:{},
            measures:{},
          },
          processModel:{},
          value1:['1','2'],
          id:this.$route.params.id,
          MeasuresDetails:[],//措施详情
          columns: [
            {
              title: '序号',
              align: 'center',
              width:80,
              render: (h, params) => {
                return h('span', params.index + 1)
              }
            },
            {
              title: '管控措施',
              key: 'measures',
              align: 'center',
              width:'350',
              tooltip:true,
            },
            {
              title: '措施类型',
              key: 'measureType',
              align: 'center',

              render: (h, params) => {
                if(params.row.measureType == 1){
                  return h('span','管理')
                }else if (params.row.measureType == 2){
                  return h('span','技术')
                }
              }
            },
            {
              title: '频次',
              tooltip:true,
              key: 'frequencyName',
              align: 'center',
            },
            {
              title: '项目部管控部门',
              key: 'projectManagementDepartment',
              align: 'center',

            },
            {
              title: '项目部分管领导',
              key: 'projectManagementLeader',
              align: 'center',
            },
            {
              title: '项目部主管领导',
              key: 'leaderInChargeOfProjectDepartment',
              align: 'center',
            },
            {
              title: '工程公司管理部门',
              key: 'controlDepartmentOfEngineeringCompany',
              align: 'center',
              checkAccess:[4],
            },
            {
              title: '工程公司分管领导',
              key: 'leaderInChargeOfEngineeringCompany',
              align: 'center',
              checkAccess:[4],
            },
            {
              title: '集团公司管理部门',
              key: 'groupCompanyControlDepartment',
              align: 'center',
              checkAccess:[3,4],
            },
            {
              title: '集团公司分管领导',
              key: 'leaderInChargeOfGroupCompany',
              align: 'center',
              checkAccess:[3,4],
            },
          ],
        }

      },
      methods: {
        replyChild(){
          if(this.checkedRows.length == 0){
            this.checkedRows.push(this.detailData)
          }
          if(this.$route.query.message){
            this.$router.push({
              name:'replyInquiries-detail',
              query:{
                source:this.$route.query.source,
                businessType:this.$route.query.businessType,
                objectId:this.$route.query.objectId,
                id:this.$route.query.id,
                riskName:this.$route.query.riskName,
              }
            })
          }else{
            this.isInquiries = true
            this.$refs.isInquiriesBox.isModel()
          }
        },
        // 关闭问询框
        modelBox(){
          this.isInquiries = false
        },
        // 打开人员选择框
        person(){
          this.personModel = true
        },
        // 关闭人员选择框
        personBox(){
          this.personModel = false
        },
        ...mapMutations([
          'closeTag'
        ]),
        closetab(){
          this.closeTag({
            name: this.$route.name,
            params: this.$route.params
          })
        },
        activeTab(code){
          this.active = code;
          if(code == 2){
            this.getMeasuresList();
          }
        },
        //获取风险详情
        getRiskDetail(){
          this.$api.measurePlan.getRiskDetail(this.id).then((res) => {
            if (res.code == 200) {
              this.detailData = res.data
              this.handleColumns(this.columns);
              this.getRecord();
            } else {
              this.$Message.error(res.data.msg);
            }
          })
        },
        //获取措施信息
        getMeasuresList(){
          this.MeasuresDetails = [];
          this.$api.measurePlan.getMeasuresList(this.id).then((res) => {
            if (res.code == 200) {
              this.MeasuresDetails = res.data
            } else {
              this.$Message.error(res.data.msg);
            }
          })
        },
        getRecord(){
          this.$api.measurePlan.getRecord(this.id).then((res) => {
            if (res.code == 200) {
              this.processModel = res.data
            } else {
              this.$Message.error(res.data.msg);
            }
          })
        },
        saveSubmit(){
          if(!this.formData.textContent){
            this.$Message.warning("说明不能为空");
            return;
          }
          this.postData.businessId = this.$route.params.id;
          if(this.$route.params.type=='examine'){
            this.postData.approvalType = 1;
          }else{
            this.postData.approvalType = 2;
          }
          if(this.showMsg == 1){
            if(this.formData.audit == 2){
              if(this.$route.params.type=='issue'){
                this.postData.risk.audit  = this.formData.audit;
                this.postData.risk.textContent  = this.formData.textContent;
                this.riskProcessHandle(this.postData);
              }else{
                this.postData.risk.audit  = this.formData.audit;
                this.postData.risk.textContent  = this.formData.textContent;
                this.formData = {
                  audit:'1',
                  textContent:'',
                }
                this.getMeasuresList();
                this.showMsg = 2;
                this.active = '2';
                this.showMsg = 2;
                this.active = '2';
                this.value1 = ['1','2'];
              }
            }else{
              this.postData.risk.audit  = this.formData.audit;
              this.postData.risk.textContent  = this.formData.textContent;
              this.formData = {
                audit:'1',
                textContent:'',
              }
              this.getMeasuresList();
              this.showMsg = 2;
              this.active = '2';
              this.value1 = ['1','2'];
            }
          }else{
            this.postData.measures.audit  = this.formData.audit;
            this.postData.measures.textContent  = this.formData.textContent;

            this.riskProcessHandle(this.postData);
          }
        },
        //审核签发
        riskProcessHandle(data){
          if(this.$route.params.type=='examine') {
            this.$api.measurePlan.riskProcessHandleExamine(data).then((res) => {
              if (res.code == 200) {
                this.closetab();
                this.$Message.success('操作成功')
              } else {
                this.$Message.error(res.message);
              }
            })
          }else{
            this.$api.measurePlan.riskProcessHandleIssue(data).then((res) => {
              if (res.code == 200) {
                this.closetab();
                this.$Message.success('操作成功')
              } else {
                this.$Message.error(res.message);
              }
            })
          }
        },
        //表格权限展示
        handleColumns (columns) {
          // 遍历处理列数组list，判断查询是否是权限选择列，如果是权限列，判断角色是否有权限，有则显示，无则隐藏
          columns.map((item, index) => {
            let checkAccess = item.checkAccess
            let access =  this.detailData.riskLevel
            if(checkAccess){
              // 判断角色是否有权限，checkAccess是列传过来的值，access是用户登录时后台返回值
              if (this.isInArray(checkAccess,access)) {
                this.columns.splice(index, 1)
                this.handleColumns(this.columns)
              }
            }

          })

        },
        isInArray(arr,value){
          for(var i = 0; i < arr.length; i++){
            if(value == arr[i]){
              return true;
            }else{
            }
          }
          return false;
        }
      },
      mounted() {
        this.getRiskDetail()

      }
    }
</script>

<style scoped>

</style>